<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue - Canvas</title>
        <script src="./vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <canvas id="canvasId" ref="canvasRef" style="width: 1000px; height: 500px"></canvas>
        </div>
        <script>
            (() => {
                new Vue({
                    el: "#app",
                    data: {
                        square: {
                            x: 10, // 方形横向偏移量
                            y: 10, // 方形纵向偏移量
                            w: 50, // 方形宽度
                            h: 50, // 方形高度
                        },
                    },
                    mounted() {
                        this.$nextTick(() => {
                            this.initDraw();
                        });
                    },
                    methods: {
                        initDraw() {
                            const canvas = this.createHDCanvas(1000, 500);
                            const ctx = canvas.getContext("2d");
                            // 绘制矩形
                            this.drowRect(ctx);
                            // 事件绑定
                            this.dragEvent(canvas, ctx);
                        },
                        // 放大canvas
                        createHDCanvas(w = 300, h = 150) {
                            var ratio = window.devicePixelRatio || 1;
                            var canvas = this.$refs.canvasRef;
                            canvas.width = w * ratio; // 实际渲染像素
                            canvas.height = h * ratio; // 实际渲染像素
                            canvas.style.width = `${w}px`; // 控制显示大小
                            canvas.style.height = `${h}px`; // 控制显示大小
                            // setTransform() 允许您缩放、旋转、移动并倾斜当前的环境
                            canvas.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
                            return canvas;
                        },
                        // 绘制矩形
                        drowRect(ctx) {
                            const { x, y, w, h } = this.square;
                            ctx.fillStyle = "#0000ff"; // 填充颜色
                            ctx.fillRect(x, y, w, h); // 绘制矩形
                        },

                        // 事件绑定
                        dragEvent(canvas, ctx) {
                            const { height, width } = canvas;
                            // 鼠标按下时
                            canvas.onmousedown = function (event) {
                                const { layerX, layerY } = event;
                                const { x, y, w, h } = this.square;
                                console.log("onmousedown", event);
                            };
                            // 鼠标移动时
                            // canvas.onmousemove = function (event) {
                            //     console.log("onmousemove", event);
                            // };
                            // 鼠标抬起时
                            // canvas.onmouseup = function (event) {
                            //     console.log("onmouseup", event);
                            // };
                        },
                    },
                });
            })();
        </script>
        <style>
            body {
                margin: 0;
            }
            #app {
                margin: 0;
                width: 100vw;
                height: 100vh;
                background-color: transparent;
                position: relative;
            }
            #canvasId {
                background-color: pink;
            }
            .dragstartClass {
                width: 1000px;
                height: 500px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                left: 0;
            }
        </style>
    </body>
</html>
